<template>
  <router-link
    to="/about"
    class="logo"
    :class="{ 'is-transparent': isTransparent }"
  >
    <div class="logo-icon">
      <div class="star-container">
        <span class="star-main">✦</span>
        <span class="star-glow">⋆</span>
      </div>
      <div class="sparkles">
        <span class="sparkle">·</span>
        <span class="sparkle">·</span>
        <span class="sparkle">·</span>
      </div>
    </div>
    <div class="logo-text">
      <div class="text-wrapper">
        <span class="text-star">Star</span>
        <span class="text-mist">Mist</span>
      </div>
    </div>
  </router-link>
</template>

<script setup lang="ts">
  defineProps({
    isTransparent: {
      type: Boolean,
      default: false,
    },
  });
</script>

<style scoped lang="less">
  .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 16px;
    position: relative;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: translateY(-1px);

      .logo-icon {
        .star-container {
          transform: rotate(180deg);

          .star-main {
            transform: scale(1.2);
            filter: brightness(1.2);
          }

          .star-glow {
            opacity: 0.8;
            transform: scale(1.1);
          }
        }

        .sparkles .sparkle {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
      }
    }

    .logo-icon {
      position: relative;
      width: 36px;
      height: 36px;

      .star-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

        .star-main {
          font-size: 28px;
          color: #3b82f6;
          transition: all 0.3s ease;
          z-index: 2;
        }

        .star-glow {
          position: absolute;
          font-size: 32px;
          color: #93c5fd;
          opacity: 0.5;
          transform: scale(0.9);
          transition: all 0.4s ease;
          z-index: 1;
        }
      }

      .sparkles {
        position: absolute;
        inset: -4px;

        .sparkle {
          position: absolute;
          font-size: 20px;
          color: #60a5fa;
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

          &:nth-child(1) {
            top: 0;
            right: 0;
            transform: translate(8px, -8px) scale(0.5);
          }

          &:nth-child(2) {
            bottom: 0;
            left: 0;
            transform: translate(-8px, 8px) scale(0.5);
          }

          &:nth-child(3) {
            top: 50%;
            right: -4px;
            transform: translate(8px, -50%) scale(0.5);
          }
        }
      }
    }

    .logo-text {
      position: relative;

      .text-wrapper {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 24px;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;

        .text-star {
          color: #3b82f6;
          transition: color 0.3s ease;
        }

        .text-mist {
          color: #64748b;
          margin-left: 2px;
          transition: color 0.3s ease;
        }
      }
    }

    // 透明状态样式
    &.is-transparent {
      .logo-icon {
        .star-main {
          color: #ffffff;
        }

        .star-glow {
          color: rgba(255, 255, 255, 0.8);
        }

        .sparkles .sparkle {
          color: rgba(255, 255, 255, 0.9);
        }
      }

      .logo-text {
        .text-wrapper {
          .text-star {
            color: #ffffff;
          }

          .text-mist {
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
    }
  }

  // 暗色模式
  @media (prefers-color-scheme: dark) {
    .logo {
      .logo-icon {
        .star-main {
          color: #60a5fa;
        }

        .star-glow {
          color: #bfdbfe;
        }

        .sparkle {
          color: #93c5fd;
        }
      }

      .logo-text {
        .text-wrapper {
          .text-star {
            color: #60a5fa;
          }

          .text-mist {
            color: #94a3b8;
          }
        }
      }

      &.is-transparent {
        .logo-text {
          .text-wrapper {
            .text-star {
              color: #ffffff;
            }

            .text-mist {
              color: rgba(255, 255, 255, 0.9);
            }
          }
        }
      }
    }
  }

  // 响应式
  @media (max-width: 768px) {
    .logo {
      padding: 6px 12px;

      .logo-icon {
        width: 32px;
        height: 32px;

        .star-container {
          .star-main {
            font-size: 24px;
          }

          .star-glow {
            font-size: 28px;
          }
        }
      }

      .logo-text {
        .text-wrapper {
          font-size: 20px;
        }
      }
    }
  }
</style>
